<template>
	<view  style="padding: 20rpx 40rpx;">
		<view class="item">
			<text>物品类别</text>
			<u-picker @cancel="show=false" @confirm="pickerInfo" :show="show" :columns="candidates"></u-picker>
			<input @click="show=true" :disabled="true" style="text-align: right;" placeholder="请选择物品类别" type="text"
				:value="leibie" />
		</view>
		<view class="item">
			<text>联系人</text>
			<input type="text" value="" style="text-align: right;" placeholder="请输入" />
		</view>
		<view class="item">
			<text>联系电话</text>
			<input type="number" value="" style="text-align: right;" placeholder="请输入" />
		</view>
		<view class="item">
			<text>上门地址</text>
			<input type="number" value="" style="text-align: right;" placeholder="请输入" />
		</view>
		<view class="item">
			<text>上门时间</text>
			<u-datetime-picker @confirm="getTimeInfo" :show="show1" :minDate="Number(new Date())"
				:maxDate="Number(new Date())+31536000000" mode="datetime"></u-datetime-picker>
			<input @click="show1=true" :disabled="true" type="text"
				:value="time?$u.timeFormat(time, 'yyyy/mm/dd MM:ss'):''" style="text-align: right;"
				placeholder="请选择时间段" />
		</view>
		<view class="item">
			<text>物品重量</text>
			<input type="text" value="" style="text-align: right;" placeholder="请输入" />
		</view>
		<view class="item">
			<text>物品件数</text>
			<input type="number" value="" style="text-align: right;" placeholder="请输入" />
		</view>
		<view style="padding: 30rpx 0;border: 5rpx #f6f6f6 solid;border-top: none;">
			添加图片
			<view style="width: 100%;">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item,index) in imgList" :key="index" style="margin: 20rpx 0;">
						<image class="img" :src="item" mode="aspectFill"></image>
					</u-grid-item>
					<u-grid-item>
						<image @click="addimgList" class="img" src="../../static/image/imgshuangchuan.png" mode="aspectFit"></image>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-textarea placeholder="请输入其他信息"></u-textarea>
		<button type="default"
			style="background-color: #00c297;color: #fff;border-radius: 50rpx;box-shadow: 0 0 30rpx #00c297;margin-top: 20rpx;">预约上门回收</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: '',
				leibie: '',
				candidates: [
					['类别1', '类别2', '类别3']
				],
				show: false,
				show1: false,
				imgList: []
			}
		},
		methods: {
			addimgList() {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							console.log(this.imgList.push(res.tempFilePaths[i]));
						}
						console.log(this.imgList);
					}
				})
			},
			getTimeInfo(e) {
				console.log(e);
				this.show1 = false
				this.time = e.value
			},
			pickerInfo(e) {
				this.show = false
				console.log(e);
				this.leibie = e.value[0]
			}
		}
	}
</script>

<style>
	.item {
		display: flex;
		justify-content: space-between;
		border-bottom: 5rpx #f6f6f6 solid;
		padding: 30rpx 0;
		color: #46484d;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
	}
</style>
